<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>

    var Nav={
        template:`
        <div>
            <router-view> </router-view>
           <router-link :to="{name:'nav.index'}">首页</router-link>
           <router-link :to="{name:'nav.mine'}">我的</router-link>
           <router-link :to="{name:'nav.person'}">个人咨询</router-link>
           <router-link :to="{name:'nav.more'}">更多</router-link>
        </div>

        `
        
    }
    var Index={
        template:`
        <div>
           首页
        </div>

        `
    }
    var Mine={
        template:`
        <div>
           我的
        </div>

        `
    }
    var Person={
        template:`
        <div>
          个人咨询
        </div>

        `
    }
    var More={
        template:`
        <div>
           更多
        </div>

        `
    }
    Vue.use(VueRouter)
    var router=new VueRouter({

        routes:[
            {path:'/nav',name:'nav',component:Nav,
             
            children:[

            //为空时可以重定向显示页面出来
                {path:'',redirect:'index'},
                {path:'index',name:'nav.index',component:Index},
                
                {path:'mine',name:'nav.mine',component: Mine},
                {path:'person',name:'nav.person',component: Person},
                {path:'more',name:'nav.more',component: More},

            ]
        }
    ]

    })

    new Vue({
        el:'#app',
        router,
        template:`
        <div>
            
            <router-view> </router-view>
        </div>
        `,
    })
</script>
</html>